<template>
  <div class="box">
    <el-dialog
      class="dialog"
      :show-close="false"
      v-model="centerDialogVisible"
      :title="title"
      width="800px"
      align-center
      style="font-weight: 700"
    >
      <div class="goodsInfo info column" v-if="type === 'column'">
        
        <p v-for="(key, item,c) in obj.value"  >
          <!-- <span class="sp1"  v-if="((item!=='btn2')&&(item!=='type2')&&(item!=='type1')&&(item!=='btn1')) " >{{ arr[c] }} :</span> -->
          {{ item }}:
          <span    v-if="((item!=='btn2')&&(item!=='type2')&&(item!=='type1')&&(item!=='btn1')) " >{{ key }}</span>
          
        </p>

        <slot name="mainP"></slot>
 
      </div>
      <div class="goodsInfo info wrap" v-if="type === 'wrap'">
        <div>订单信息</div>
        <p v-for="(key, item,c) in obj.value"  >
          <span class="sp1"   v-if="((item!=='btn2')&&(item!=='type2')&&(item!=='type1')&&(item!=='btn1')) "  >{{ arr[c] }} :</span>
          <span   v-if="((item!=='btn2')&&(item!=='type2')&&(item!=='type1')&&(item!=='btn1')) " >{{ key }}</span>
        </p>
      </div>

      <div class="main">
        <slot name="main"></slot>
      </div>
      <template #footer>
        <span class="dialog-footer" v-show="isShow">
          <el-button @click="$emit('cancel')">{{ QuXiao }}</el-button>
          <el-button type="primary" @click="$emit('preservation')">{{
            btnTitle
          }}</el-button>
        </span>
      </template>

      <div class="headRight">
        <b v-show="headright"> 待接单 </b>
        <slot name="headright"></slot>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const centerDialogVisible = ref(false);
defineEmits(["preservation", "cancel"]);
const a = defineProps({
  title: {
    type: String,
    default: "商品报损",
  },
  type: {
    type: String,
  },
  btnTitle: {
    default: "确认",
  },
  headright: {
    default: true,
  },
  isShow: {
    default: true,
  },
  QuXiao: {
    default: "取消",
  },
});

const obj = reactive({});

const arr=ref([])

// 打开遮罩层并且接受一个数据对象
function open(val,value) {
  centerDialogVisible.value = true;

  obj.value = val;
  // delete(obj.value.type2)  
  // delete(obj.value.type1)  
  // delete(obj.value.btn1)  
  // delete(obj.value.btn2)  
  // console.log(obj.value);
  arr.value=value
  // console.log(obj.value);
}
// 关闭遮罩层并且接受一个数据对象
function Tube(val) {
  centerDialogVisible.value = false;
}

// 导出遮罩层函数
defineExpose({
  open,
  Tube,
});
// 点击保存
</script>

<style lang="less" scoped>
.headRight {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 18px;
  font-weight: 700;
  color: red;
}

.main {
  * {
    font-weight: 400;
  }
}

.wrap {
  display: flex;
  flex-wrap: wrap;

  div {
    width: 100%;
    color: black;
    font-weight: 700;
    font-size: 18px;
  }

  p {
    padding: 14px 0;
    color: rgba(172, 172, 172, 0.9);
    min-width: 30%;
    font-weight: 400;

    .sp1 {
      margin-right: 10px;
    }
  }
}

.column {
  display: flex;
  flex-direction: column;

  div {
    width: 100%;
    color: black;
    font-weight: 700;
    font-size: 18px;
  }

  p {
    padding: 14px 0;
    color: rgba(172, 172, 172, 0.9);

    .sp1 {
      margin-right: 10px;
    }
  }
}

dialog {
  line-height: 100px;
  // font-weight: 700;
}

.info {
  margin-bottom: 20px;
}

.goodsInfo {
  border-top: 1px solid #ccc;
  padding-top: 20px;
}

.ReportingImg {
  width: 125px;
  height: 125px;
  margin-right: 20px;
}

.pic {
  display: flex;
  margin-top: 20px;
}

.cause {
  width: 400px;
}

.desc {
  width: 650px;
  /* height: 50px; */
}
</style>
